import { Card, Col, DatePicker, Row, Tabs, Table, Switch } from 'antd';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
import styles from "@/global.less";
import {exportCheck} from "@/pages/SupplyChainManagement/StockCheck/service";
import {saveFileAs} from "@/utils/utils";
import React from "react";

const { TabPane } = Tabs;

const columns = [
  {
    title: '店铺名称',
    dataIndex: 'storeName',
    render: (text) => <a>{text}</a>,
    fixed: 'left',
    width: 100,
  },
  {
    title: '店铺联系人',
    dataIndex: 'contacts',
    key: 'contacts',
    width: 100,
  },
  {
    title: '销售总金额',
    dataIndex: 'consumeAmount',
    key: 'consumeAmount',
    width: 120,
    sorter: (a, b) => a.consumeAmount - b.consumeAmount,
  },
  {
    title: '销售总笔数',
    dataIndex: 'consumeCount',
    key: 'consumeCount',
    width: 120,
    sorter: (a, b) => a.consumeCount - b.consumeCount,
  },
  {
    title: '余额支付金额',
    dataIndex: 'balanceConsumeAmount',
    key: 'balanceConsumeAmount',
    width: 120,
    sorter: (a, b) => a.balanceConsumeAmount - b.balanceConsumeAmount,
  },
  {
    title: '余额支付笔数',
    dataIndex: 'balanceConsumeCount',
    key: 'balanceConsumeCount',
    width: 120,
    sorter: (a, b) => a.balanceConsumeCount - b.balanceConsumeCount,
  },
  {
    title: '积分支付金额',
    dataIndex: 'integralConsumeAmount',
    key: 'integralConsumeAmount',
    width: 120,
    sorter: (a, b) => a.integralConsumeAmount - b.integralConsumeAmount,
  },
  {
    title: '积分支付笔数',
    dataIndex: 'integralConsumeCount',
    key: 'integralConsumeCount',
    width: 120,
    sorter: (a, b) => a.integralConsumeCount - b.integralConsumeCount,
  },

  {
    title: '组合支付余额金额',
    dataIndex: 'composeBalance',
    key: 'composeBalance',
    width: 120,
    sorter: (a, b) => a.composeBalance - b.composeBalance,
  },
  {
    title: '组合支付积分金额',
    dataIndex: 'composeIntegral',
    key: 'composeIntegral',
    width: 120,
    sorter: (a, b) => a.composeIntegral - b.composeIntegral,
  },
  {
    title: '组合支付笔数',
    dataIndex: 'composeCount',
    key: 'composeCount',
    width: 120,
    sorter: (a, b) => a.composeCount - b.composeCount,
  },
  {
    title: '现金支付金额',
    dataIndex: 'cashConsumeAmount',
    key: 'cashConsumeAmount',
    width: 120,
    sorter: (a, b) => a.cashConsumeAmount - b.cashConsumeAmount,
  },
  {
    title: '现金支付笔数',
    dataIndex: 'cashConsumeCount',
    key: 'cashConsumeCount',
    width: 120,
    sorter: (a, b) => a.cashConsumeCount - b.cashConsumeCount,
  },

  {
    title: '刷卡支付金额',
    dataIndex: 'cardConsumeAmount',
    key: 'cardConsumeAmount',
    width: 120,
    sorter: (a, b) => a.cardConsumeAmount - b.cardConsumeAmount,
  },
  {
    title: '刷卡支付笔数',
    dataIndex: 'cardConsumeCount',
    key: 'cardConsumeCount',
    width: 120,
    sorter: (a, b) => a.cardConsumeCount - b.cardConsumeCount,
  },

  {
    title: '扫码支付金额',
    dataIndex: 'codeConsumeAmount',
    key: 'codeConsumeAmount',
    width: 120,
    sorter: (a, b) => a.codeConsumeAmount - b.codeConsumeAmount,
  },
  {
    title: '扫码支付笔数',
    dataIndex: 'codeConsumeCount',
    key: 'codeConsumeCount',
    width: 120,
    sorter: (a, b) => a.codeConsumeCount - b.codeConsumeCount,
  },

  {
    title: '充值总金额',
    dataIndex: 'rechargeAmount',
    key: 'rechargeAmount',
    width: 120,
    sorter: (a, b) => a.rechargeAmount - b.rechargeAmount,
  },
  {
    title: '充值总笔数',
    dataIndex: 'rechargeCount',
    key: 'rechargeCount',
    width: 120,
    sorter: (a, b) => a.rechargeCount - b.rechargeCount,
  },
  {
    title: '现金充值金额',
    dataIndex: 'cashRechargeAmount',
    key: 'cashRechargeAmount',
    width: 120,
    sorter: (a, b) => a.cashRechargeAmount - b.cashRechargeAmount,
  },
  {
    title: '现金充值笔数',
    dataIndex: 'cashRechargeCount',
    key: 'cashRechargeCount',
    width: 120,
    sorter: (a, b) => a.cashRechargeCount - b.cashRechargeCount,
  },

  {
    title: '开卡总金额',
    dataIndex: 'openCardAmount',
    key: 'openCardAmount',
    width: 120,
    sorter: (a, b) => a.openCardAmount - b.openCardAmount,
  },
  {
    title: '开卡总笔数',
    dataIndex: 'openCardCount',
    key: 'openCardCount',
    width: 120,
    sorter: (a, b) => a.openCardCount - b.openCardCount,
  },

  {
    title: '现金开卡金额',
    dataIndex: 'cashOpenCardAmount',
    key: 'cashOpenCardAmount',
    width: 120,
    sorter: (a, b) => a.cashOpenCardAmount - b.cashOpenCardAmount,
  },
  {
    title: '现金开卡笔数',
    dataIndex: 'cashOpenCardCount',
    key: 'cashOpenCardCount',
    width: 120,
    sorter: (a, b) => a.cashOpenCardCount - b.cashOpenCardCount,
  },

  {
    title: '退款总金额',
    dataIndex: 'withdrawAmount',
    key: 'withdrawAmount',
    width: 120,
    sorter: (a, b) => a.withdrawAmount - b.withdrawAmount,
  },
  {
    title: '退款总笔数',
    dataIndex: 'withdrawCount',
    key: 'withdrawCount',
    width: 120,
    sorter: (a, b) => a.withdrawCount - b.withdrawCount,
  },

  {
    title: '余额退款金额',
    dataIndex: 'withdrawBalance',
    key: 'withdrawBalance',
    width: 120,
    sorter: (a, b) => a.withdrawBalance - b.withdrawBalance,
  },
  {
    title: '余额退款笔数',
    dataIndex: 'withdrawBalanceCount',
    key: 'withdrawBalanceCount',
    width: 120,
    sorter: (a, b) => a.withdrawBalanceCount - b.withdrawBalanceCount,
  },

  {
    title: '积分退款金额',
    dataIndex: 'withdrawIntegral',
    key: 'withdrawIntegral',
    width: 120,
    sorter: (a, b) => a.withdrawIntegral - b.withdrawIntegral,
  },
  {
    title: '积分退款笔数',
    dataIndex: 'withdrawIntegralCount',
    key: 'withdrawIntegralCount',
    width: 120,
    sorter: (a, b) => a.withdrawIntegralCount - b.withdrawIntegralCount,
  },
];
const SalesCard = ({
  rangePickerValue,
  salesData,
  onSearch,
  onExport,
  handleRangePickerChange,
  loading,
  selectDate,
  handleChangeTab,
  showDate,
  onYearChange,
  onMonthChange,
  onWeekChange,
  selectDay,
  year,
  month,
  day,
  week,
  Convergence,
  style,
  isRecharge,
}) => (
  <Card
    bordered={false}
    bodyStyle={{
      padding: 0,
    }}
  >
    <div className={style.salesCard}>
      <Tabs
        tabBarExtraContent={
          <div className={style.salesExtraWrap} >
            <div className={style.salesExtra}>
              {(() => {
                switch (showDate) {
                  case 'year':
                    return (
                      <DatePicker
                        picker="year"
                        allowClear={false}
                        value={year}
                        onChange={onYearChange}
                      />
                    );
                  case 'month':
                    return (
                      <DatePicker
                        picker="month"
                        allowClear={false}
                        value={month}
                        onChange={onMonthChange}
                      />
                    );

                  case 'week':
                    return (
                      <DatePicker
                        picker="week"
                        allowClear={false}
                        value={week}
                        onChange={onWeekChange}
                      />
                    );

                  case 'day':
                    return (
                      <DatePicker
                        allowClear={false}
                        disabledDate={(current) => {
                          return current > moment(new Date());
                        }}
                        showToday
                        value={day}
                        onChange={selectDay}
                      />
                    );
                  default:
                    break;
                }
              })()}
              {onSearch}
              {onExport}
            </div>
          </div>
        }
        size="large"
        tabBarStyle={{
          marginBottom: 24,
        }}
        onChange={handleChangeTab}
      >
        <TabPane tab="年统计" key="year" ></TabPane>
        <TabPane tab="月统计" key="month"></TabPane>
        <TabPane tab="周统计" key="week"></TabPane>
        <TabPane tab="日统计" key="day"></TabPane>
      </Tabs>
      {/*<Table*/}
      {/*  columns={columns}*/}
      {/*  bordered*/}
      {/*  rowKey={'id'}*/}
      {/*  scroll={{ y: 540 }}*/}
      {/*  dataSource={salesData.BillData}*/}
      {/*  pagination={false}*/}
      {/*  loading={loading}*/}
      {/*/>*/}

      <ProTable
        className={styles.formModal}
        rowKey={r=>r.storeName}
        bordered
        type="table"
        columns={columns}
        scroll={{ y: 540 }}
        dataSource={salesData.BillData}
        pagination={false}
        loading={loading}
        toolBarRender={null}
        search={false}
      />

    </div>
  </Card>
);

export default SalesCard;
